<template>
  <div class="Inspection">
    <div class="blueTitleStyle title">智能巡视</div>
    <div
      class="Inspection-con"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="inspection-mun">
        <div @click="toBdz">
          <div class="numfont">{{bdzsl||0}}</div>
          <div>变电站数量</div>
        </div>
        <div @click="toXjjh">
          <div class="numfont">{{RobotInspection.BZXJ||0}}</div>
          <div>本周巡检数</div>
        </div>
      </div>
      <div class="inspection-round">
        <div>
          <div></div>
        </div>
        <div>
          <div class="round2"></div>
        </div>
      </div>
      <div class="progress">
        <progressbar @chartClick="chartClick" :mydata.sync="RobotInspection" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { HomepageModule } from "@/store/modules/Homepage";
import progressbar from "../components/progressbar.vue";
import date from "@/utils/date";
import time from "@/utils/time.js";
@Component({
  components: { progressbar },
})
export default class Inspection extends Vue {
  RobotInspection: {
    WZX: number | string;
    ZXZ: number | string;
    YZX: number | string;
    ZXSB: number | string;
  } = {
    WZX: 0,
    ZXZ: 0,
    YZX: 0,
    ZXSB: 0,
  };
  //变电站数量
  bdzsl = "";
  //本周巡检数
  bzxjs = "";
  loading: boolean = false;
  // 前往巡检计划
  toBdz() {
    this.$router.push({
      path: "/jointInspection/stationdetail",
      query: {
        bs: "jqr",
        startTime: "",
        endTime: "",
      },
    });
  }
  // 前往巡检计划
  toXjjh() {
    let nowTime = new Date().getTime();
    let startTime = time(nowTime - 7 * 24 * 60 * 60 * 1000);
    let endTime = time(new Date());
    // 跳转路由+传参
    this.$router.push({
      path: "/jointInspection/plan",
      query: {
        startTime: startTime,
        endTime: endTime,
      },
    });
  }
  get currentMap() {
    let mapByStation = HomepageModule.mapByStation;
    return mapByStation;
  }
  @Watch("currentMap")
  fetch() {
    this.queryRobotInspection();
  }
  // 数据查询
  queryRobotInspection() {
    let mapByStation = HomepageModule.mapByStation;
    let params: any = {};
    if (mapByStation.stationId) {
      params.bdzId = mapByStation.stationId;
    }
    (this as any).$services
      .queryRobotInspection({ data: params })
      .then((result: any) => {
        this.RobotInspection = result.data[0];
        this.bdzsl = result.data[0].DZZS;
        this.bzxjs = result.data[0].BZXJ;
        // console.log(result.data);
        this.loading = false;
      })
      .catch((err: object) => {
        this.loading = false;
      });
  }
  // 点击时
  chartClick(item) {
    // console.log(item.name);
    let nowTime = new Date().getTime();
    let startTime = time(nowTime - 7 * 24 * 60 * 60 * 1000);
    let endTime = time(new Date());
    let name = item.name;
    let obj = {
      未巡检: {
        path: "/jointInspection/plan",
        query: {
          xjzt: name,
          startTime: startTime,
          endTime: endTime,
        },
      },
      巡检中: {
        path: "/jointInspection/plan",
        query: {
          xjzt: name,
          startTime: startTime,
          endTime: endTime,
        },
      },
      巡检完成: {
        path: "/jointInspection/plan",
        query: {
          xjzt: name,
          startTime: startTime,
          endTime: endTime,
        },
      },
      巡检失败: {
        path: "/jointInspection/plan",
        query: {
          xjzt: name,
          startTime: startTime,
          endTime: endTime,
        },
      },
      异常报告: {
        path: "/jointInspection/inspectionreport",
        query: {},
      },
    };
    let route = obj[name];
    this.$router.push(route);
  }

  mounted() {
    this.loading = true;
    this.queryRobotInspection();
  }
  timeThisWeek(): any {
    throw new Error("Method not implemented.");
  }
}
</script>

<style lang="scss" scoped>
.Inspection {
  width: 100%;
  height: 100%;
  position: relative;
  $munheight: 45%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    .inspection-mun {
      display: flex;
      align-content: center;
      top: 0.27rem;
      height: $munheight;
      width: 100%;
      position: absolute;
      z-index: 9;
      > div {
        width: 50%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-content: center;
        text-align: center;
        cursor: pointer;
      }
      .numfont {
        font-size: 0.21rem;
      }
    }
    .inspection-round {
      display: flex;
      align-content: center;
      top: 0.27rem;
      height: $munheight;
      width: 100%;
      position: absolute;
      z-index: 2;
      > div {
        width: 50%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        > div {
          flex: none;
          width: 1.08rem;
          height: 1.08rem;
          background-image: url("../../../../assets/img/HomePage/bor_bd.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          animation: turn 8s linear infinite;
        }
        .round2 {
          background-image: url("../../../../assets/img/HomePage/bor_xj.png");
        }
        @keyframes turn {
          0% {
            -webkit-transform: rotate(0deg);
          }
          25% {
            -webkit-transform: rotate(90deg);
          }
          50% {
            -webkit-transform: rotate(180deg);
          }
          75% {
            -webkit-transform: rotate(270deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
          }
        }
      }
    }
    .progress {
      height: 100%;
      width: 100%;
    }
  }
}
</style>

